import AMap from 'AMap'
import Bus from '@/components/Bus'

export default {
  props: {

  },
  components: {

  },
  data () {
    return {
      flagArr: [],
      cluster: null,
      marker: null,
      infoWindow: null,
      position: [],
      markers: [],
      targetMark: null,
      // 创建图标覆盖物并且定义icon的样式
      // 初始状态图标定制
      initIcon: new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(46, 46),
        // 图标的取图地址
        image: require('../asset/img/initIcon.png'),
        // 根据所设置的大小拉伸或压缩图片，等同于CSS中的background-size属性
        imageSize: new AMap.Size(46, 46),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
      }),
      // 创建图标覆盖物并且定义icon的样式
      // 激活状态图标定制
      activeIcon: new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(48, 48),
        // 图标的取图地址
        image: require('../asset/img/activeIcon.png'),
        // 根据所设置的大小拉伸或压缩图片，等同于CSS中的background-size属性
        imageSize: new AMap.Size(48, 48),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
      })
    }
  },
  created () {

  },
  mounted () {
    Bus.$on('close', () => {
      // console.log('bus监听', this.visible)
      this.changeIcon()
    })
  },
  watch: {

  },
  methods: {
    addJson () {
      if (!this.map) {
        return false
      }
      // 添加覆盖物，按照省区划分进行覆盖
      this.geoJson = new AMap.GeoJSON({
        geoJSON: this.China, // GeoJSON对象
        getPolygon: (geojson, lnglats) => { // 还可以自定义getMarker和getPolyline
          return new AMap.Polygon({
            path: lnglats,
            fillOpacity: 0.01,
            strokeOpacity: 0.01,
            strokeColor: 'white',
            fillColor: 'white',
            cursor: 'pointer',
            extData: geojson.properties
          })
        }
      })
      this.geoJson.setMap(this.map)
      this.addMarker()
    },
    addCluster () {
      if (this.cluster) {
        this.cluster.setMap(null)
      }
      this.map.plugin(['AMap.MarkerClusterer'], () => {
        this.cluster = new AMap.MarkerClusterer(
          this.map,
          this.markers,
          {
            gridSize: 10, // 设置网格像素大小
            renderClusterMarker: (obj) => {
              obj.marker.setIcon(this.initIcon)
            }
          }
        )
      })
    },
    addMarker () {
      // 地图打点
      this.universityJson.features.forEach((item) => {
        const { properties: { name }, geometry: { coordinates } } = item
        if (name) {
          const marker = new AMap.Marker({
            map: this.map,
            icon: this.initIcon,
            position: new AMap.LngLat(coordinates[0], coordinates[1]),
            offset: new AMap.Pixel(-23, -23)
          })
          this.markers.push(marker)
          this.openTip(item, marker)
        }
      })
      setTimeout(() => {
        this.addCluster()
      }, 500)
    },
    // 学校名提示窗
    openTip (item, marker) {
      // 实例化信息窗体
      const name = `<h3 class="name">${item.properties.name}</h3>`
      const infoWindow = new AMap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: name,
        offset: new AMap.Pixel(10, -25)
      })
      // 鼠标移入打点位置显示tip
      AMap.event.addListener(marker, 'mouseover', (e) => {
        this.openWindow(infoWindow, item.geometry.coordinates)
      })
      AMap.event.addListener(marker, 'mouseout', (e) => {
        this.closeInfoWindow()
      })
      // 鼠标点击打点位置弹出自定义的信息窗体
      AMap.event.addListener(marker, 'click', (e) => {
        this.openInfoTip(item)
        this.changeIcon(e.target, item.geometry.coordinates)
        // console.log('点击事件', item)
      })
    },
    // 关闭自定义窗体
    closeInfoWindow () {
      this.map.clearInfoWindow()
    },
    // 打开自定义窗体
    openWindow (infoWindow, position) {
      infoWindow.open(this.map, position)
    },
    // 切换icon
    changeIcon (targetMark, position) {
      // 存储打开弹框时的mark打点位置
      this.position = position || this.position
      // 存储打开弹框时的mark实例
      this.targetMark = targetMark || this.targetMark
      // 如果弹框打开，需要激活maker变色
      if (this.visible) {
        this.targetMark.hide()
        // 第一次点击状态激活即创建一个新的maker作为激活状态的marker，并且坐标在未激活状态时的位置
        if (!this.marker) {
          this.flagArr.push(this.targetMark)
          // 此时只需要在原来的围追创建激活状态的marker即可
          this.marker = new AMap.Marker({
            map: this.map,
            icon: this.visible ? this.activeIcon : this.initIcon,
            position: this.position,
            offset: new AMap.Pixel(-23, -23)
          })
          this.map.add(this.marker)
        } else {
          // 非第一次点击时只需给点换位置即可
          if (this.flagArr[this.flagArr.length - 1] !== this.targetMark) {
            this.flagArr[this.flagArr.length - 1].show()
            this.marker.setPosition(this.position)
          } else {
            this.flagArr = []
          }
          this.flagArr.push(this.targetMark)
        }
        this.marker.show()
      } else {
        // 关闭弹框时隐藏掉激活状态的marker，显示存储起来的marker即可
        this.marker.hide()
        this.targetMark.show()
      }
    }
  }
}
